<template>
  <vxe-grid ref="xGridOfWarehouseAreaRef" v-bind="gridOptions">
    <template #toolbar_buttons>
      <a-button type="dashed" v-if="getButton('创建库区')" @click="drawer.data.show = true">创建库区</a-button>
    </template>
    <template #operate="{ row }">
      <a @click="handleEdit(row)">编辑</a>
      <Divider type="vertical"/>
      <Popconfirm
      placement="topRight"
        :title="`提示：确定您要删除【${row.name}】吗？`"
        cancel-text="取消"
        @confirm="handleDelete(row.ID)">
        <a>删除</a>
      </Popconfirm>
    </template>
  </vxe-grid>

  <Drawer
  :show="drawer.data.show" :is-update="drawer.data.isUpdate"
  :row="drawer.data.row"
  :parent-id="$props.parentId"
  :name="$props.name"
  :code="$props.code"
  @on-success="reload"
  @on-drawer-close="onDrawerClose"/>
</template>
<script lang="ts" name="WarehouseArea" setup>
import { Divider, Popconfirm } from "ant-design-vue";
import { defineProps, reactive, ref } from 'vue';
import { useRoute } from "vue-router";
import { VxeGridPropTypes, VxeGridProps } from 'vxe-table';
import { columnsOfArea } from "../data";
import Drawer from "./Drawer.vue";
import { deletes, getListData } from '/@/api/wms/warehouse-area';

const props = defineProps({
  parentId: { type: Number, default: 0 },
  name: { type: String, default: '' },
  code: { type: String, default: '' },
})

const gridOptions = reactive<VxeGridProps>({
  border: true,
  round: true,
  stripe: true,
  showHeaderOverflow: true,
  showOverflow: true,
  keepSource: true,
  id: 'full_edit_1',
  size: 'medium',
  height: window.innerHeight - 396,
  columns: (() => {
    return [
    ...columnsOfArea,
    {title: '操作', sortable: false, visible: true, slots: {default: 'operate'}, width: 120, align: 'center', fixed: props.optFixed,},
    ] as VxeGridPropTypes.Columns
  })(),
  rowConfig: {
    keyField: 'ID',
    isHover: true
  },
  columnConfig: {
    resizable: true
  },
  customConfig: {
    storage: true,
  },
  sortConfig: {
    trigger: 'cell',
    remote: false
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true, // 显示刷新按钮
    import: false, // 显示导入按钮
    export: false, // 显示导出按钮
    print: false, // 显示打印按钮
    zoom: true, // 显示全屏按钮
    custom: true // 显示自定义列按钮
  },
  proxyConfig: {
    seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
    form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
    props: {
      // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
      result: 'result', // 配置响应结果列表字段
      total: 'page.total' // 配置响应结果总页数字段
    },
    // 只接收Promise，具体实现自由发挥
    ajax: {
      // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
      query: ({ page, sorts, filters, form }) => {
        return getListData(props.parentId)
      },
      queryAll: ({page,}) => {
        return getListData(props.parentId)
      }
    }
  },
})

const xGridOfWarehouseAreaRef = ref()
const reload = () => {
  // batchDeleteDisabled.value = true
  // oneDisabled.value = true
  // gridOptions.loading = true

  // let params = {}
  // if (!isReset) {
  //   params = Object.assign({}, toRaw(insideQueryParams.value),)
  // }
  // if (props.queryApi) {
  //   props.queryApi(params).then(dd => {
  //     if (props.isTree) {
  //       xGrid.value.reloadData(dd)
  //     } else {
  //       xGrid.value.reloadData(dd?.result)
  //       let {pager} = xGrid.value.getProxyInfo()
  //       pager.total = dd?.page?.total
  //     }
  //   }).finally(() => {
  //     gridOptions.loading = false
  //     // insideQueryParams.value = {}
  //   })
  // }
  getListData(props.parentId).then(dd => {
    let table_ = xGridOfWarehouseAreaRef.value
    if (table_) {
      table_.reloadData(dd)
    }
  })
}

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const handleDelete = async (id:number) => {
  await deletes([id])
  // reloadWarehoust()
  reload()
}

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const route = useRoute()
const getButton = (name:string) => {
  const list = route?.meta?.buttonList || []
  return list.find(e => e.name === name)
}

</script>

<style scoped>
</style>